{% extends "base.html" %}

{% block titlebar %}Home{% endblock %}
{% block title %}Recaffeinate!{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/css/autocompleter.css"
      type="text/css" media="screen">
<link rel="stylesheet" href="/static/css/recaf.css"
      type="text/css" media="screen">
<script type="text/javascript" src="/static/js/mootools.js"></script>
<script type="text/javascript" src="/static/js/observer.js"></script>
<script type="text/javascript" src="/static/js/autocompleter.js"></script>
<script type="text/javascript" src="/static/js/recaf.js"></script>
{% endblock %}

{% block content %}

{% if not user %}
<p>Please log in. You cannot use Recaffeinate! without authenticating.</p>
{% else %}

<form action="/" method="POST">
  <input autocomplete="off" id="bev-search" type="text" name="beverage">
  <input type="hidden" id="bev-id" name="bev-id" value="">
  <input type="submit" name="consume" value="Consume!">
</form>

{% if message %}
<p class="message">{{message}}</p>
{% endif %}

{% if graph %}
<p id="graphs">
  <img src="{{graph}}" title="Spiffy graph!">
</p>
{% endif %}

{% if intakes %}
<h2>Last intakes</h2>
<table id="intakes" align="center" width="100%">
  <thead>
    <tr><td>Beverage</td><td>Time</td></tr>
  </thead>
  {% for intake in intakes %}
  <tr><td>{{intake.0}}</td><td>{{intake.1}}</td></tr>
  {% endfor %}
</table>
{% endif %}

<script type="text/javascript">
window.addEvent('domready', Recaf.autocompleter);
</script>
{% endif %}
{% endblock %}
